<template>
	<div class="app">
		<h2>当前求和为:{{ sum1 }}</h2>
		<h2>当前求和为:{{ sum2 }}</h2>
		<h2>当前汽车为:{{ car1 }}</h2>
		<h2>当前汽车为:{{ car2 }}</h2>
		<button @click="plus1">数字+1</button>
		<button @click="plus2">数字+1</button>
		<button @click="chanageBrand1">修改品牌</button>
		<button @click="chanageColor1">修改颜色</button>
		<button @click="chanagePrice1">修改价格</button>

		<button @click="chanageBrand2">修改品牌</button>
		<button @click="chanageColor2">修改颜色</button>
		<button @click="chanagePrice2">修改价格</button>
	</div>
</template>

<script setup lang="ts" name="App">
import { ref, reactive, readonly, shallowReadonly } from 'vue';

let sum1 = ref(0)
let sum2 = readonly(sum1)
let car1 = reactive({
	brand: '特斯拉',
	options: { color: '天青色', price: 200 }
})
let car2 = shallowReadonly(car1) // 只处理浅层次的[只读]

function plus1() {
	sum1.value += 1
}
function plus2() {
	sum2.value += 1 // sum2 是不能修改的
}

function chanageBrand1() {
	car1.brand = '比亚迪'
}
function chanageColor1() {
	car1.options.color = '少女粉'
}
function chanagePrice1() {
	car1.options.price += 500
}

function chanageBrand2() {
	car2.brand = '比亚迪'
}
function chanageColor2() {
	car2.options.color = '少女粉'
}
function chanagePrice2() {
	car2.options.price += 500
}
</script>

<style scoped>
.app {
	background-color: skyblue;
	border-radius: 10px;
	box-shadow: 0 0 10px;
	padding: 10px;
}

button {
	margin-left: 10px;
}
</style>